<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0325</title>
    <style>
        .active{
            text-decoration: underline;
        }
        .error1{
            color: hotpink;
        }
        .checked{
            font-weight: 900;/*加粗*/
        }
        .demo {
            font-size: 14px;
            color: hotpink;
        }
        .demo:hover{
            font-size: 25px;
            color: #56a5f1;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1><v-bind>绑定class的数组语法及绑定style</v-bind></h1>
        <p :class="[activeClass,error1Class,checkedClass]">绑定class的数组语法--基础款</p>
        <p :class="[isActive ? 'active' : '' ,error1Class]">
            绑定class的数组语法--包含三元表达式
            <button @click="changeClass">toggle</button>
        </p>
        <p :class="[{active:isActive},error1Class]">
            绑定class的数组语法--数组套对象
            <button @click="changeClass">toggle</button>
        </p>
        <hr>
        <hr>
        <p :style="{fontSize:size,color:txtcolor}">绑定style--基础班</p>
        <input type="text" v-model="size">
        <p :style="styleObj">绑定style--Obj</p>
        <p :style="[styleObj,style2]">绑定style--数组</p>
        <p class="demo" :style="{transition:time}">style自动添加前缀</p>
    </div>
    <script src="./js/vue.js"></script>
    <script >
        let vm = new Vue({
            el:'#app',
            data: {
                activeClass:'active',
                error1Class:'error1',
                checkedClass:'checked',
                isActive:false,
                size:'20px',
                txtcolor:'#56a5f1',
                styleObj:{
                    cursor:'pointer',
                    'font-weight':900,
                },
                style2:{
                    color:'#4a35f6'
                },
                time:'all 0.5s ease 0.2s',

                

            },
            methods: {
                changeClass(){
                    this.isActive = !this.isActive;
                }
            },
        })
    </script>
</body>
</html>